<%@ include file="/common/taglibs.jsp"%>

<div class="jquery_tab_container">
    <span class="heading_tab advanced_link active tab1"><fmt:message key="codex.country"/></span>
</div>

<div id="test">

</div>
<div class="jquery_tab">
    <div class="content_block"></div>

    <select id="level1">
        <option value="-1">
            --- Odberete vrednost
        </option>
        <c:forEach items="${initialOptions}" var="options">
            <option value="${options.id}">

                ${options.ime}

            </option>
        </c:forEach>
    </select>

    <a href="#">Add</a>
    
    <br /><br />
    <select id="level2">
        <option value="-1">
            --- Odberete vrednost
        </option>
    </select>
    <br /><br />
    <select id="level3">
        <option value="-1">
            --- Odberete vrednost
        </option>
    </select>
    <br /><br />
    <select id="level4">
        <option value="-1">
            --- Odberete vrednost
        </option>
    </select>

</div>
<script>
    
    jQuery("#level2").attr('disabled', 'disabled');
    jQuery("#level3").attr('disabled', 'disabled');
    jQuery("#level4").attr('disabled', 'disabled');
    
    jQuery("#level1").change(function () {
       
        if ($(this).value != -1) {
           
            jQuery("#level2").removeAttr('disabled');
           
            jQuery.getJSON('<c:url value="/hello.json" />?parent=' + $(this).value, function(data) {
    
                jQuery('#level2').children().remove();
                  
                jQuery('#level2').append('<option value="-1"> --- Odberete vrednost</option>');
                  
                jQuery.each(data, function(key, val) {
          
                     jQuery("#level2").append("<option value="+val+">"+key+"</option>");
                    
                });
               
            });
          
        } else {
           
            jQuery("#level2").attr('disabled', 'disabled');
            
            jQuery('#level2').children().remove();
                  
            jQuery('#level2').append('<option value="-1"> --- Odberete vrednost</option>');
            
            jQuery("#level3").attr('disabled', 'disabled');
            
            jQuery('#level3').children().remove();
                  
            jQuery('#level3').append('<option value="-1"> --- Odberete vrednost</option>');
            
            jQuery("#level4").attr('disabled', 'disabled');
            
            jQuery('#level4').children().remove();
                  
            jQuery('#level4').append('<option value="-1"> --- Odberete vrednost</option>');
           
        }
        
    });
    
    jQuery("#level2").change(function () {
       
        if ($(this).value != -1) {
           
            jQuery("#level3").removeAttr('disabled');
            
            jQuery.getJSON('<c:url value="/hello.json" />?parent=' + $(this).value, function(data) {
              
               
                jQuery('#level3').children().remove();
                  
                jQuery('#level3').append('<option value="-1"> --- Odberete vrednost</option>');
            
                jQuery.each(data, function(key, val) {
                    
                    jQuery("#level3").append("<option value="+val+">"+key+"</option>");
                    
                });
               
            });
           
          
        } else {
            
             jQuery("#level3").attr('disabled', 'disabled');
            
            jQuery('#level3').children().remove();
                  
            jQuery('#level3').append('<option value="-1"> --- Odberete vrednost</option>');
            
            jQuery("#level4").attr('disabled', 'disabled');
            
            jQuery('#level4').children().remove();
                  
            jQuery('#level4').append('<option value="-1"> --- Odberete vrednost</option>');
           
        }
        
    });
    
    jQuery("#level3").change(function () {
       
        if ($(this).value != -1) {
           
            jQuery("#level4").removeAttr('disabled');
       
            jQuery('#level4').children().remove();
                  
            jQuery('#level4').append('<option value="-1"> --- Odberete vrednost</option>');
           
            jQuery.getJSON('<c:url value="/hello.json" />?parent=' + $(this).value, function(data) {
               
                jQuery.each(data, function(key, val) {
                    
                    jQuery("#level4").append("<option value="+val+">"+key+"</option>");
                    
                });
               
            });
           
          
        } else {
           
                 jQuery("#level4").attr('disabled', 'disabled');
            
            jQuery('#level4').children().remove();
                  
            jQuery('#level4').append('<option value="-1"> --- Odberete vrednost</option>');
        }
        
    });
    
</script>
